<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="160px">
      <el-form-item label="标题："  prop="title">
        <el-input type="text" v-model="form.title"/>
      </el-form-item>
      <el-form-item label="内容：" prop="content">
        <Tinymce v-model="form.content" :height="300" id="Tinymce"></Tinymce>
      </el-form-item>
      <el-form-item label="音频：" prop="content">
        <UploadMp3 :setImg="setImg" :setName="setName" :dialogImageUrl="dialogImageUrl"/>
      </el-form-item>
        <el-form-item  label="标签选择：" prop="eleList" v-if="eleList.length">
                <el-checkbox-group v-model="form.tagsIds" size="medium">
                    <el-checkbox-button v-for="(item,index) in eleList" :label="item.id" :key="index">{{item.name}}</el-checkbox-button>
                </el-checkbox-group>
        </el-form-item>
      <el-form-item>
        <el-button @click="onCancel">取消</el-button>
        <el-button type="primary" :loading="loading"  @click="onSubmit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import { edit,detail } from '@/api/culture'
  import {list} from '@/api/tag'
  import { getToken } from '@/utils/auth'
  import {showDecimal} from '@/utils'
  import Tinymce from '@/components/Tinymce'
  import UploadMp3 from '@/components/UploadMp3'
  export default {
    data() {
      return {
        dialogImageUrl:'',
        loading:false,
        id:0,
        form: {
          attachments:[{
            desc:'',
            name:'',
            type:'audio',
            url:''
          }],
          managerId:0,
          token:getToken(),
          content:'',
          tagsIds:[],
          title:''
        },
        rules:{
          title: [
            { required: true, message: '请输入名称', trigger: 'blur' },
          ]
        },
        eleList:[]
      }
    },
    methods: {
       setImg(url) {
         console.log(url,'url')
        this.dialogImageUrl=url;
        this.form.attachments[0].url=url;
      },
      setName(name){
        console.log(name,'name');
        this.form.attachments[0].name=name.split(".")[0]||name;
      },
      getDetails(){
          detail({targetId:this.$route.query.id}).then((json) => {
            if(json.status === 200){
               this.form.title=json.data.title;
               this.form.content=json.data.content;
               this.form.knowledgeId=json.data.id;
               this.dialogImageUrl=json.data.attachments[0].url;
               this.form.userId=json.data.userId;
               for(let item of json.data.tags){
                   this.form.tagsIds.push(item.id)
               }
              }else{
                this.$message.error(json.data.message);
              }
          });
        },
        getEle(){
            list({managerId:this.$route.query.managerId}).then((json) => {
            if(json.status === 200){
               this.eleList=json.data;
              }else{
                this.$message.error(json.data.message);
              }
          });
        },
      onSubmit() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.loading=true
            let data=JSON.parse(JSON.stringify(this.form))
            edit(data).then(res=>{
              this.$message.success('添加(编辑)成功')
              this.onCancel()
            }).finally(()=>{
              this.loading=false
            })
          }
        });
      },
      onCancel() {
        this.$router.go(-1)
      }
    },
    created() {
      this.form.managerId=this.$route.query.managerId;
      this.form.userId=this.$route.query.userId
      this.getEle();
      if(this.$route.query.id){
        // this.form.id=this.$route.query.id;
        this.getDetails();
      } 
    },
    components:{
        Tinymce,
        UploadMp3
    }
  }
</script>

<style lang="scss" scoped>
  .app-container{
    width: 780px;
  }
  .line{
    text-align: center;
  }
</style>
